<template>
<el-dialog class="add-source" :lock-scroll="true" :append-to-body="true" :title="addForm.title" :visible.sync="addForm.show" width="480px" :close-on-click-modal="false">
    <el-form ref="addSourceForm" :model="addForm.form" :rules="rules" label-width="100px" @submit.native.prevent>
        <el-form-item label="名称" prop="sourceName">
            <el-input :maxlength="48" clearable placeholder="请输入名称" v-model="addForm.form.sourceName"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="databaseType">
            <el-select clearable v-model="addForm.form.databaseType" placeholder="请选择数据库类型">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="主机名" prop="databaseIp">
            <el-input :maxlength="48" clearable placeholder="请输入主机名" v-model="addForm.form.databaseIp"></el-input>
        </el-form-item>
        <el-form-item label="端口" prop="databasePort">
            <el-input :maxlength="48" clearable placeholder="请输入端口" v-model="addForm.form.databasePort"></el-input>
        </el-form-item>
        <el-form-item label="数据库名称" prop="databaseName">
            <el-input :maxlength="48" clearable placeholder="请输入数据库名称" v-model="addForm.form.databaseName"></el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="databaseUser">
            <el-input autocomplete="off" :maxlength="48" clearable placeholder="请输入用户名" v-model="addForm.form.databaseUser"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="databasePwd">
            <el-input autocomplete="off" type="password" :maxlength="48" clearable placeholder="请输入密码" v-model="addForm.form.databasePwd"></el-input>
        </el-form-item>
        <el-form-item label="描述">
            <el-input :maxlength="100" type="textarea" :rows="5" clearable placeholder="请输入描述" v-model="addForm.form.description"></el-input>
        </el-form-item>
        <el-form-item label="测试连通性">
            <el-button v-preventReClick="2000" type="primary" plain  @click="handleSave(false)">测试连通性</el-button>
        </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="addForm.show=false">取 消</el-button>
      <el-button type="primary" v-preventReClick="2000" @click="handleSave(true)">确 定</el-button>
    </span>
</el-dialog>
</template>

<script>
export default {
    name: 'AddSource',
    props: {
        addForm: {
            type: Object,
            required: true
        }
    },
    data () {
        return {
            options: [
                { label: 'Mysql', value: 0 },
                { label: 'DB2', value: 1 },
                { label: 'Oracle', value: 2 }
            ],
            rules: {
                sourceName: [{
                    required: true,
                    message: '请输入名称',
                    trigger: 'blur'
                }],
                databaseType: [{
                    required: true,
                    message: '请选择类型',
                    trigger: 'change'
                }],
                databaseIp: [{
                    required: true,
                    message: '请输入主机名',
                    trigger: 'blur'
                }],
                databasePort: [{
                    required: true,
                    message: '请输入端口',
                    trigger: 'blur'
                }],
                databaseName: [{
                    required: true,
                    message: '请输入数据库名称',
                    trigger: 'blur'
                }],
                databaseUser: [{
                    required: true,
                    message: '请输入用户名',
                    trigger: 'blur'
                }],
                databasePwd: [{
                    required: true,
                    message: '请输入密码',
                    trigger: 'blur'
                }]
            }
        }
    },
    methods: {
        handleSave (flag) {
            this.$refs['addSourceForm'].validate((valid) => {
                if (valid) {
                    this.$emit('save', flag)
                } else {
                    return false
                }
            })
        }
    }
}
</script>

<style lang="less">
.add-source {
    .el-input, .el-select {
        width: 320px !important;
    }

    .el-textarea__inner {
        width: 320px !important;
    }

    .is-plain {
        background: #fff;
        &:hover {
            background: #ecf5ff;
            color: #2680EB;
        }
    }
}
</style>
